<template>
	<view class="page-container">
		<uni-forms label-align="right" label-width="160rpx">
			<uni-forms-item label="修改头像">
				<uni-file-picker
					v-model="imageValue" 
					fileMediatype="image" 
					mode="grid" 
					@select="selectFile"
					@success="uploadSuccess" 
				/>
			</uni-forms-item>
			<uni-forms-item label="昵称:">
				<uni-easyinput v-model="formData.nickname" placeholder="请输入昵称" />
			</uni-forms-item>
			<uni-forms-item label="密码:">
				<uni-easyinput v-model="formData.nickname" placeholder="请输入昵称" />
			</uni-forms-item>
			<uni-forms-item label="重复密码:">
				<uni-easyinput v-model="formData.nickname" placeholder="请输入昵称" />
			</uni-forms-item>
			<uni-forms-item label="个人简介:">
				<uni-easyinput v-model="formData.nickname" placeholder="请输入昵称" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="handleSubmit">确定</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageValue:[],
				avatar: {
					"name": "avatar",
					"extname": "jpg",
					"url": "https://p4.itc.cn/q_70/images03/20220311/c5210d8f7b434b088be416dff6efb719.jpeg",
				},
				formData: {
					nickname: '',
					password: undefined,
					password2: undefined,
					description: '',
				}
			}
		},
		methods: {
			uploadSuccess(e){
				console.log(e)
			},
			selectFile(e){
				console.log(e)
			},
			handleSelect(val){
				console.log(val);
				uni.showLoading({
					title:'正在上传'
				})
				console.log('uploading')
				uni.uploadFile({
					url: process.env.API_URL+'/api/public/uploadImg.json',
					filePath:val.tempFilePaths[0],
					name:'file',
					header:{
						'Authorization':'Bearer '+uni.getStorageSync('token')
					},
					success(res){
						console.log(res);
					},
					fail(err) {
						console.error(err)
					},
					complete(){
						uni.hideLoading()
					}
				})
			},
			handleSubmit() {
				uni.showLoading({
					title: '正在提交'
				})
				setTimeout(() => {
					uni.request({
						url: '/static/api/user/edit.json',
						method: "PUT",
						data: this.formData,
						success(res) {
							uni.showModal({
								title: '对话框',
								content: '内容'
							})
						},
						fail(err) {

						},
						complete() {
							uni.hideLoading()
						}
					})
				}, 2000)

			}
		}
	}
</script>

<style scoped>
	.page-container {
		padding: 16px;
	}
</style>